
<style scoped lang="less">
  .article-detail {
    .header {
      padding: 10px 15px 0 15px;
      background: white;
      .personal-info {
        padding: 10px 0 10px 0;
        img {
          border-radius: 20px;
        }
        .nick {
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
        }
        .star {
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
        }
        .date {
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
          span {
            line-height: 44px;
          }
        }
      }
    }
    .info{
        padding-left:40px;
        text-align: left;
    }

    .image-list img{
      height:70px;
    }
  }
</style>

<template>
  <div class="article-detail">

      <div class="header">
      <div class="personal-info flex flex-pack-justify">
        <div style="display:flex" class="name">
          <div><span><img width="40px" height="40px" :src='articleDetail.headPortrait'/></span></div>
          <div style="text-align:left;margin-left:5px;">
            <span class="nick">{{articleDetail.nickName}}</span><br>
            <span class="star">{{articleDetail.constellation}}  {{articleDetail.grade}}</span>
          </div>
        </div>
        <div class="date">
          <span>09-09</span>
        </div>
      </div>
      <div class="info">
        <span>{{articleDetail.title}}</span>
      </div>
      <div style="padding-left:40px;margin-top:10px;">
         <image_video_list :height="80" :imageList="imgList" :videoList="videoList"></image_video_list>
      </div>

    </div>
       <div style="margin-top:10px;">
        <comment_list :commentList="articleDetail.commentList"></comment_list>
      </div>
  </div>
</template>
<script>
  import util from '@/libs/util'
  import comment_list from '../../components/comment_list.vue'
  import image_video_list from '../../components/image_video_list.vue'
  export default {
      name: 'article-detail',
      components: {
       comment_list,
      image_video_list
    },
    data() {
      return {
        msg: '',
        id: 0,
        articleDetail: {},
        imgList: [], 
        videoList:[],
      }
    },
    mounted() {
       this.id = this.$route.query.id;
       this.$http.get('api/share/getArticle?id='+this.id).then((res) => {
      //this.$http.get('static/article.json').then((res) => {
        let data = res.data;
        if (data.statusCode == '600') {
          this.articleDetail = data.content;
          this.articleDetail.publishingTime = util.fmtDate(this.articleDetail.publishingTime);

            if (this.articleDetail.image) {
            this.imgList = this.articleDetail.image.split(';');
          }
          if (this.articleDetail.video) {
            this.videoList = this.articleDetail.video.split(';')
          }
        }
      })
  
    }
  }
</script>

